<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态背景 - 页面加载进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            color: #fff;
            background: linear-gradient(135deg, #6075c6, #b65b5b, #ad9050);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            padding: 20px;
            line-height: 1.6;
        }
        
        /* 粒子背景效果 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            animation: float 15s infinite linear;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
        }
        
        header {
            text-align: center;
            margin: 40px 0;
            padding: 20px;
            border-radius: 10px;
        }
        
        h1 {
            font-size: 3.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            background: linear-gradient(45deg, #ffd166, #ef476f, #06d6a0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textGlow 3s ease infinite;
        }
        
        .subtitle {
            font-size: 1.4rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        .progress-section {
            margin: 50px 0;
            padding: 30px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        h2 {
            font-size: 2.2rem;
            margin-bottom: 20px;
            color: #ffd166;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        .progress-container {
            height: 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            margin: 30px 0;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.3);
        }
        
        .progress-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39);
            border-radius: 10px;
            transition: width 0.3s ease;
            position: relative;
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
        }
        
        .progress-value {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            font-size: 14px;
            color: white;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 12px 25px;
            font-size: 1.1rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            background: rgba(33, 150, 243, 0.8);
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(33, 150, 243, 0.5);
            position: relative;
            overflow: hidden;
        }
        
        button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }
        
        button:hover::before {
            left: 100%;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(33, 150, 243, 0.8);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .btn-success {
            background: rgba(76, 175, 80, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(76, 175, 80, 0.5);
        }
        
        .btn-warning {
            background: rgba(255, 152, 0, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 152, 0, 0.5);
        }
        
        .btn-danger {
            background: rgba(244, 67, 54, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(244, 67, 54, 0.5);
        }
        
        .btn-info {
            background: rgba(0, 188, 212, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 188, 212, 0.5);
        }
        
        .info-cards {
            display: flex;
            gap: 20px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        
        .card {
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: #ffd166;
        }
        
        .card p {
            margin-bottom: 15px;
        }
        
        .card ul {
            padding-left: 20px;
            margin-bottom: 15px;
        }
        
        .card li {
            margin-bottom: 8px;
            position: relative;
            padding-left: 20px;
        }
        
        .card li:before {
            content: '•';
            position: absolute;
            left: 0;
            color: #ffd166;
            font-size: 20px;
        }
        
        .event-log {
            height: 150px;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .status-indicators {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .status {
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            min-width: 200px;
            margin: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .status-value {
            font-size: 1.4rem;
            font-weight: bold;
            margin-top: 10px;
            color: #ffd166;
        }
        
        .resources-info {
            margin-top: 20px;
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 10px;
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            font-size: 1.1rem;
            opacity: 0.8;
        }
        
        /* 动画定义 */
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        @keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translate(100px, -100px) rotate(360deg);
                opacity: 0;
            }
        }
        
        @keyframes textGlow {
            0% {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            }
            50% {
                text-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
            }
            100% {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            }
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            button {
                width: 100%;
                max-width: 300px;
            }
        }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>
    
    <div class="container">
        <header>
            <h1>动态背景加载进度条</h1>
            <p class="subtitle">炫酷动态背景结合页面加载进度监控，提供流畅的用户体验</p>
        </header>
        
        <main>
            <section class="progress-section">
                <h2>页面加载进度</h2>
                
                <div class="progress-container">
                    <div class="progress-bar" id="progressBar">
                        <span class="progress-value" id="progressValue">0%</span>
                    </div>
                </div>
                
                <div class="controls">
                    <button id="simulateBtn" class="btn-success">模拟进度条</button>
                    <button id="realTrackingBtn" class="btn-info">真实资源跟踪</button>
                    <button id="reloadBtn" class="btn-warning">重新加载资源</button>
                    <button id="resetBtn" class="btn-danger">重置进度</button>
                </div>
                
                <div class="resources-info">
                    <h3>资源加载状态</h3>
                    <div id="resourcesStatus"></div>
                </div>
            </section>
            
            <div class="info-cards">
                <div class="card">
                    <h3>动态背景效果</h3>
                    <p>本页面实现了以下动态背景效果：</p>
                    <ul>
                        <li>流动渐变背景动画</li>
                        <li>随机浮动粒子效果</li>
                        <li>标题文字发光动画</li>
                        <li>卡片悬停上升效果</li>
                        <li>按钮流光动画效果</li>
                    </ul>
                    <p>所有动画使用纯CSS实现，无额外依赖</p>
                </div>
                
                <div class="card">
                    <h3>事件日志</h3>
                    <div class="event-log" id="eventLog"></div>
                </div>
            </div>
            
            <div class="status-indicators">
                <div class="status">
                    <div>DOMContentLoaded</div>
                    <div class="status-value" id="domStatus">未触发</div>
                </div>
                <div class="status">
                    <div>load 事件</div>
                    <div class="status-value" id="loadStatus">未触发</div>
                </div>
                <div class="status">
                    <div>readyState</div>
                    <div class="status-value" id="readyState">loading</div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>动态背景加载进度条 | 使用纯CSS和JavaScript实现</p>
        </footer>
    </div>
    
    <!-- 模拟资源占位符 -->
    <img src="https://picsum.photos/800/400?random=1" alt="Placeholder" style="display:none">
    <img src="https://picsum.photos/800/400?random=2" alt="Placeholder" style="display:none">
    <img src="https://picsum.photos/800/400?random=3" alt="Placeholder" style="display:none">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const progressBar = document.getElementById('progressBar');
            const progressValue = document.getElementById('progressValue');
            const eventLog = document.getElementById('eventLog');
            const domStatus = document.getElementById('domStatus');
            const loadStatus = document.getElementById('loadStatus');
            const readyState = document.getElementById('readyState');
            const resourcesStatus = document.getElementById('resourcesStatus');
            const particlesContainer = document.getElementById('particles');
            
            const simulateBtn = document.getElementById('simulateBtn');
            const realTrackingBtn = document.getElementById('realTrackingBtn');
            const reloadBtn = document.getElementById('reloadBtn');
            const resetBtn = document.getElementById('resetBtn');
            
            let currentMode = 'simulate';
            let simulateInterval;
            let trackedResources = [];
            
            // 创建粒子背景
            function createParticles() {
                const particleCount = 30;
                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');
                    
                    // 随机属性
                    const size = Math.random() * 10 + 5;
                    const posX = Math.random() * 100;
                    const posY = Math.random() * 100;
                    const delay = Math.random() * 15;
                    const duration = 10 + Math.random() * 20;
                    
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${posX}%`;
                    particle.style.top = `${posY}%`;
                    particle.style.animationDelay = `${delay}s`;
                    particle.style.animationDuration = `${duration}s`;
                    
                    particlesContainer.appendChild(particle);
                }
            }
            
            // 更新日志
            function logEvent(message) {
                const now = new Date();
                const time = now.toTimeString().split(' ')[0];
                const logEntry = document.createElement('div');
                logEntry.textContent = `[${time}] ${message}`;
                eventLog.prepend(logEntry);
                
                // 保持日志长度
                if (eventLog.children.length > 15) {
                    eventLog.removeChild(eventLog.lastChild);
                }
            }
            
            // 更新进度条
            function updateProgress(value) {
                progressBar.style.width = value + '%';
                progressValue.textContent = value + '%';
                
                // 进度条颜色变化
                if (value >= 100) {
                    setTimeout(() => {
                        progressBar.style.background = 'linear-gradient(90deg, #4CAF50, #2E7D32)';
                    }, 500);
                } else if (value > 80) {
                    progressBar.style.background = 'linear-gradient(90deg, #CDDC39, #FF9800)';
                } else if (value > 60) {
                    progressBar.style.background = 'linear-gradient(90deg, #8BC34A, #CDDC39)';
                } else {
                    progressBar.style.background = 'linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39)';
                }
            }
            
            // 模拟进度条
            function simulateProgress() {
                clearInterval(simulateInterval);
                currentMode = 'simulate';
                updateProgress(0);
                logEvent('开始模拟进度条');
                
                let progress = 0;
                simulateInterval = setInterval(() => {
                    if (progress < 90) {
                        progress += Math.random() * 5;
                        updateProgress(progress);
                    } else if (progress < 100) {
                        // 在90%后缓慢增加
                        progress += Math.random() * 0.5;
                        updateProgress(progress);
                    }
                    
                    if (progress >= 100) {
                        clearInterval(simulateInterval);
                        logEvent('模拟进度完成');
                    }
                }, 200);
            }
            
            // 真实资源跟踪
            function trackRealProgress() {
                clearInterval(simulateInterval);
                currentMode = 'real';
                updateProgress(0);
                logEvent('开始真实资源跟踪');
                
                // 获取页面所有资源
                trackedResources = Array.from(document.querySelectorAll('img, link[rel="stylesheet"], script[src]'));
                resourcesStatus.innerHTML = '';
                
                if (trackedResources.length === 0) {
                    logEvent('未找到可跟踪的资源');
                    updateProgress(100);
                    return;
                }
                
                logEvent(`找到 ${trackedResources.length} 个资源进行跟踪`);
                
                // 创建资源状态显示
                trackedResources.forEach((resource, index) => {
                    const resourceInfo = document.createElement('div');
                    resourceInfo.className = 'resource-item';
                    resourceInfo.innerHTML = `
                        <div>资源 #${index + 1}: ${resource.tagName} ${resource.src || resource.href || ''}</div>
                        <div class="resource-status">加载中...</div>
                    `;
                    resourcesStatus.appendChild(resourceInfo);
                });
                
                let loadedCount = 0;
                
                // 监听每个资源的加载事件
                trackedResources.forEach((resource, index) => {
                    resource.addEventListener('load', () => {
                        loadedCount++;
                        const progress = Math.floor((loadedCount / trackedResources.length) * 100);
                        updateProgress(progress);
                        
                        // 更新资源状态
                        const statusElements = resourcesStatus.querySelectorAll('.resource-status');
                        if (statusElements[index]) {
                            statusElements[index].textContent = '加载完成';
                            statusElements[index].style.color = '#4CAF50';
                        }
                        
                        logEvent(`资源 #${index + 1} 加载完成 (${loadedCount}/${trackedResources.length})`);
                    });
                    
                    resource.addEventListener('error', () => {
                        loadedCount++;
                        const progress = Math.floor((loadedCount / trackedResources.length) * 100);
                        updateProgress(progress);
                        
                        // 更新资源状态
                        const statusElements = resourcesStatus.querySelectorAll('.resource-status');
                        if (statusElements[index]) {
                            statusElements[index].textContent = '加载失败';
                            statusElements[index].style.color = '#F44336';
                        }
                        
                        logEvent(`资源 #${index + 1} 加载失败 (${loadedCount}/${trackedResources.length})`);
                    });
                });
            }
            
            // 重新加载资源
            function reloadResources() {
                if (currentMode !== 'real') {
                    alert('请先切换到"真实资源跟踪"模式');
                    return;
                }
                
                logEvent('重新加载所有资源...');
                trackedResources.forEach(resource => {
                    if (resource.tagName === 'IMG') {
                        const originalSrc = resource.src;
                        resource.src = '';
                        setTimeout(() => {
                            resource.src = originalSrc + '?reload=' + Date.now();
                        }, 100);
                    }
                });
                
                updateProgress(0);
                resourcesStatus.innerHTML = '';
                trackRealProgress();
            }
            
            // 重置进度
            function resetProgress() {
                clearInterval(simulateInterval);
                updateProgress(0);
                resourcesStatus.innerHTML = '';
                logEvent('进度已重置');
                currentMode = '';
            }
            
            // 事件监听器
            simulateBtn.addEventListener('click', simulateProgress);
            realTrackingBtn.addEventListener('click', trackRealProgress);
            reloadBtn.addEventListener('click', reloadResources);
            resetBtn.addEventListener('click', resetProgress);
            
            // 页面事件监听
            document.addEventListener('DOMContentLoaded', function() {
                domStatus.textContent = '已触发';
                domStatus.style.color = '#4CAF50';
                logEvent('DOMContentLoaded 事件已触发');
            });
            
            window.addEventListener('load', function() {
                loadStatus.textContent = '已触发';
                loadStatus.style.color = '#4CAF50';
                logEvent('load 事件已触发 - 页面所有资源加载完成');
            });
            
            // 监听readyState变化
            document.onreadystatechange = function() {
                readyState.textContent = document.readyState;
                logEvent(`readyState 变化: ${document.readyState}`);
            };
            
            // 初始日志
            logEvent('页面初始化完成');
            logEvent('请选择一种进度跟踪模式');
            
            // 创建粒子背景
            createParticles();
        });
    </script>
</body>
</html>